<template>
	<el-card class="box-card">
		<div class="title">{{ title }}</div>
		<div class="value">{{ value }}</div>
		<div class="chart">
			<slot></slot>
		</div>
		<div class="line"></div>
		<div class="total">
			<slot name="footer"></slot>
		</div>
	</el-card>
</template>
<script>
export default {
	name: 'CommonCard',
	props: {
		title: String,
		value: String,
	},
	data() {
		return {};
	},
	methods: {},
};
</script>
<style lang="scss" scoped>
.title {
	font-size: 12px;
	color: #999;
}
.value {
	font-size: 25px;
	color: #000;
	margin-top: 5px;
	letter-spacing: 1px;
}
.chart {
	height: 50px;
}
.line {
	margin: 10px 0;
	border-top: 1px solid #eee;
}
.total {
	display: flex;
	color: #666;
	align-items: center;
	font-size: 12px;
}
</style>

<style lang="scss">
.total-sales-change {
	display: flex;
	font-size: 12px;
	padding-top: 3px;
	box-sizing: border-box;
	color: #666;
	align-items: center;
}
.emphasis {
	color: #333;
	margin-left: 5px;
	font-weight: 700;
}
</style>
